<template>
  <div id="view">
    <div id="box">
      <div id="form">
        <p class="p1">登录</p>
        <p class="p2">
          <span class="country hoverhand" @click="showCountry">+{{area_code}}</span>
          <input type="number" v-model="mobile" placeholder="账号" class="placeholder">
        </p>
        <p class="p3">
          <input type="password" v-model="password" placeholder="密码" class="placeholder">
        </p>
        <p class="p4">
          <router-link to="/forgetLoginPws">忘记密码？</router-link>
        </p>
        <p class="p5">
          <button id="login" @click="login">登 录</button>
        </p>
        <p class="p6">
          <span>还没有人人矿场账号？</span>
          <router-link :to="{path: '/register' , query:{inviter_uid : inviter_uid}}">注册</router-link>
        </p>
      </div>
    </div>
    <select-country ref="selCountry" @chosed="selectedCountry"></select-country>
  </div>
</template>
<script>
  import { getAreaCode  , postLogin } from '../http/api'
  // import store from "../store/store";
  export default {
    name: 'login',
    data() {
      return {
        introduce: '登录',
        mobile: '', //手机号
        password: '', //密码
        areaList: '',//国家列表
        area_code: '',//区域id
        country_id : '',//国家id
        selected_country : '',//选择的国家
        inviter_uid : '',//inviter_uid
        showSelCountry : false,
        countrys : [],
      }
    },
    components:{
      SelectCountry : resolve => { require(['../components/sel_country'], resolve) }, /*选择国家*/
    },
    mounted() {
      let thiz = this;
      if( !this.areaList ){
        getAreaCode().then(res => {
          thiz.countrys = res.data.country;
          thiz.area_code = thiz.countrys[0].area_code;
          thiz.selected_country = thiz.countrys[0];
          this.country_id = thiz.countrys[0].id;
        })
      }
    },
    methods:{
      showCountry(){
        let thiz = this;
        thiz.$refs.selCountry.getAreaList(thiz.countrys);
      },
      selectedCountry( curCountry ){
        let item = curCountry.item;
        this.selected_country = item;
        this.area_code = item.area_code;
        this.country_id = item.id;
      },
      login(){
        let info = null;
        if( !this.mobile ){
          info = '请输入账号';
        }
        if( !this.password ){
          info = '请输入密码';
        }
        if( !info ){
          let thiz = this, params = {
            telphone: thiz.mobile,
            area_code: thiz.area_code,
            password: thiz.password,
            country_id : thiz.country_id
          };
          postLogin(params).then(res => {
            if (res.code == 200) {
              thiz.loginSuccess(res.data);
            }
          });
        }else{
          require('../common/js/toast').toast(info);
        }
      },
      loginSuccess( data ){
        require('../common/js/toast').toast('登录成功');
        let user = data.user ,  thiz = this;
        this.$store.commit('mobile',user.telphone || thiz.mobile);
        this.$store.commit('areaCode',user.area_code || thiz.area_code);
        this.$store.commit('name', data.user.user_name);
        this.$store.commit('uid', data.user.uid);
        // let roots = require('../http/roots').data;
        this.$store.commit('reloadHeader' , true);
        this.$router.push({path : '/machinemarket'});
        // window.location.href = roots.roots[roots.index]+'/';
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-top: 72px;
    #box{
      padding-top: 157px;padding-bottom: 140px;
      #form{
        .bgFFF();.boxShadow();.overHidden();.borderRadius();
        padding: 53px 50px;padding-bottom: 58px;width: 450px;margin: 0 auto;
        input{
          .input();.placeholder(14px);font-size: 14px;
        }
        .p1{
          font-size: 20px;padding-bottom: 50px;
        }
        .p2{
          .border;.overHidden;font-size: 0;height: 50px;border: 0;
          .country{
            background: #F1EEEE;.textCenter;color: #999999;font-family: 'MicrosoftYaHei';
            float: left;display: inline-block;width: 60px;height:100%;line-height: 50px;font-size: 14px;
            .borderRadius();border-top-right-radius: 0;border-bottom-right-radius: 0;
          }
          input{
            border: 0;float: left;width: calc( 100% - 60px );height: 100%;
            .border;border-top-left-radius: 0;border-bottom-left-radius: 0;
          }
        }
        .p3{
          padding-top: 30px;
        }
        .p4{
          padding-top: 17px;padding-bottom: 52px;.textRight;
          a{
            .colorYellow;font-size: 14px;
          }
        }
        .p5{
          button{
            .submit;
          }
        }
        .p6{
          color: #999;.textCenter;padding-top: 25px;
          a{
            .colorYellow;font-size: 14px;
          }
        }
      }
    }
  }
</style>
